<template>
	<div class="unchecked">
		<van-pull-refresh v-model="state.refresh" @refresh="onRefresh">
			<div class="total" v-if="state.total">{{ `共有房屋：${state.total}栋` }}</div>
			<van-list
				:loading="state.loading"
				:finished="state.finished"
				:finished-text="state.list?.length !== 0 ? '———— 已经到底了哦 ————' : '' "
				@load="getList"
			>
				<div class="lists" v-if="state.list?.length">
					<div class="record" v-for="item in state.list" :key="item.id">
						<div class="title">
							<h3>房屋编号：{{ item?.fwbh }}</h3>
						</div>
						<div class="item" v-for="(value, key) in route.query.type === 'week' ? dataEnum : dataEnum2" :key="key">
							<p>{{ value }}</p>
							<p>{{ item?.[key] || '-' }}</p>
						</div>
					</div>
				</div>
				<component
					:is="empty"
					v-if="!state.list?.length && !state.loading"
				/>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup>
import { uncheckedHouse, monthUncheckedHouse } from '@/service/village'
import { nextTick, reactive } from 'vue'
import empty from '@/components/empty.vue'
import { useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'

const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)
const route = useRoute()

const dataEnum = {
	'hzxm': '房主姓名',
	'address': '地址',
	'zcsj': '自查时间',
}
const dataEnum2 = {
  'hzxm': '房主姓名',
  'address': '地址',
  'szc': '所在村',
}
const state = reactive({
	list: [],
	page: 1,
	pageSize: 10,
	refresh: false,
	loading: false,
	finished: false
})

const onRefresh = () => {
	state.list = []
	state.page = 1
	state.refresh = false
	state.loading = false
	state.finished = true
	nextTick(() => {
		state.finished = false
	})
}

const getList = async () => {
	const params = {
		pageindex: state.page -  1,
		limit: state.pageSize,
		xzqdm: loginInfo.value?.xzqdm,
		towndm: loginInfo.value?.towndm,
		villagedm: loginInfo.value?.villagedm,
	}
	try {
		state.loading = true
		const result = route.query.type === 'week'
      ? await uncheckedHouse(params)
      : await monthUncheckedHouse(params)
       
		state.loading = false
		state.list = [...state.list, ...result.data.items]
		state.total = result?.data?.total
		if (state.page * state.pageSize >= state.total) {
			state.finished = true
		}
		state.page++
	} catch (err) {
		state.loading = false
		state.finished = true
	}
}

</script>

<style scoped lang="less">
.unchecked {
	.total {
		height: 82px;
		line-height: 82px;
		text-align: center;
		color: #696969;
	}
	.record {
		margin: 0 32px 24px;
		padding: 24px 32px;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, .14);
		border-radius: 8px;
		background: #fff;
		.title {
			display: flex;
			img {
				width: 48px;
				height: 48px;
				margin-right: 12px;
			}
			h3 {
				width: 0;
				flex: 1;
				min-height: 48px;
				line-height: 48px;
			}
		}
		.item {
			display: flex;
			margin-top: 4px;
			p {
				min-height: 44px;
				line-height: 44px;
				&:nth-of-type(1) {
					width: 160px;
					color: #A0A0A0;
				}
				&:nth-of-type(2) {
					width: 0;
					flex: 1;
					color: #696969;
				}
			}
		}
	}
}
</style>
